<template>
  <div class="header">
    <div class="header-left">
      <img src="@/assets/logo.png" alt="Logo" class="logo" />
    </div>
    <div class="toolbar">
      <el-dropdown>
        <el-icon style="margin-right: 8px; margin-top: 1px">
          <setting />
        </el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout">Logout</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span>{{ userInfo.username }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Setting } from '@element-plus/icons-vue'
import { menu_permission, token } from '@/api/auth'
import router from '@/router/index'
import { userInfo } from '@/api/store'

const logout = () => {
  // 清除本地存储的 token
  token.value = ''
  menu_permission.value = {}

  // 跳转到登录页面
  router.push('/login')
}
</script>

<style scoped>
.toolbar {
  display: flex;
  align-items: center;
}

.header {
  display: flex;
  align-items: center;
  background-color: #fff; /* header 背景色 */
  color: var(--el-text-color-primary);
  border-bottom: 1px solid #f5f5f5; /* header 与 menu-header 区域之间的间距颜色 */
}

.header-left {
  flex: 1;
  display: flex;
  align-items: center;
}

.logo {
  height: 40px; /* 根据需要调整 logo 的高度 */
  padding: 5px; /* logo 与左侧边缘的间距 */
}

.header-right {
  display: flex;
  align-items: center;
  margin-right: 20px; /* header 右侧内容的间距 */
}
</style>